<template>
<!--    折柱混合图-->
    <div>
        <div style="width: 100%;height: 400px;" ref="FoldingColumnMixing">
        </div>
    </div>

</template>

<script>
    import * as echarts from 'echarts';
    export default {
        name: "FoldingColumnMixing",
        props:{
            FoldingData:Array
        },
        data() {
            return {
                mediaProvince:[],
                xAxis:[],
                negative:[],
                neuter:[],
                front:[]

            }
        },
        mounted() {
            this.echartsInit()
            this.mediaProvince = this.FoldingData
        },
        methods:{
            getxAxis(){
              this.mediaProvince.map((i) => {
                  this.xAxis.push(i.name)
              })
            },
            getNegative(){
                this.mediaProvince.map((i) => {
                    this.negative.push(i.negative)
                })
            },
            getNeuter(){
                this.mediaProvince.map((i) => {
                    this.neuter.push(i.neuter)
                })
            },
            getFront(){
                this.mediaProvince.map((i) => {
                    this.front.push(i.front)
                })
            },
            // negative:1905,
            // neuter:8305,
            // front:672
            echartsInit() {
                //使用时只需要把setOption里的对象换成echarts中的options或者自己的参数即可
                echarts.init(this.$refs.FoldingColumnMixing).setOption({
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false,
                                //自定义样式
                                optionToContent:  (opt) => {
                                    let axisData = opt.xAxis[0].data; //坐标数据
                                    let series = opt.series; //折线图数据
                                    let tdHeads = '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">时间</td>'; //表头
                                    let tdBodys = ''; //数据
                                    console.log(series)
                                    series.forEach(function (item) {
                                        //组装表头
                                        tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                                    });
                                    let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                                    for (let i = 0, l = axisData.length; i < l; i++) {
                                        for (let j = 0; j < series.length; j++) {
                                            //组装表数据
                                            tdBodys += `<td><input class="${j}x" type="text" value="${series[j].data[i]}" style="border: none;text-align: center;color: #444444;color: #444444"></td>`;
                                        }
                                        table += `<tr><td style="padding: 2px 10px;text-align: center"><input type="text" value="${axisData[i]}" style="border: none;text-align: center;color: #444444"> </td>${tdBodys}</tr>`;
                                        tdBodys = '';
                                    }
                                    table += '</tbody></table>';
                                    return table;
                                },
                                //编辑功能
                                contentToOption: (HTMLDomElement, opt) => {
                                    if(document.getElementsByClassName('dataViewTable').length>1){
                                        this.$message.error('有其他未关闭的数据视图，请关闭后重试');
                                    }else{
                                        for(let i = 0;i < opt.series.length;i++){
                                            var name = 'dataX' + i;
                                            window[name] = []
                                            for (let j of document.getElementsByClassName(`${i}x`) ){
                                                window[name].push(j.value)
                                            }
                                            opt.series[i].data = window[name]
                                        }
                                        return opt;}
                                },
                            },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: [
                        {
                            type: 'value',
                        },
                        {
                            type: 'value',
                        }
                    ],
                    xAxis: {
                        type: 'category',
                        data: this.xAxis,
                        nameRotate:90,
                        nameTextStyle:{//名称文本样式
                            fontFamily: 'PingFangSC-Regular',
                            fontSize: 12,
                            color: 'rgba(255,255,255,0.54)',
                            textAlign:'center',
                            lineHeight:14
                        },
                        axisTick:{//x轴刻度线
                            show:false,
                            inside:false,
                            alignWidthLabel:true
                        },
                        axisLabel:{
                            interval:0,//坐标轴刻度标签间隔显示，0表示所有
                            rotate:90//坐标轴上的名字旋转90度
                        },


                    },
                    series: [
                        {
                            name: '负面-声量（求和）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                // show: true  //条状上的数值
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.negative,
                            barWidth:10,//柱状粗细
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: 'blue'//柱状图颜色
                                }
                            }

                        },
                        {
                            name: '中性-声量（求和）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                // show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.neuter,
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: 'orange'//柱状图颜色
                                }
                            }
                        },
                        {
                            name: '正面-声量（求和）',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                // show: true
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.front,
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: '#999'//柱状图颜色
                                }
                            }
                        },
                        {
                            name: 'Temperature',
                            type: 'line',
                            yAxisIndex: 1,
                            data: this.front,
                        }
                    ]
                })
            }
        },
        created() {
            this.mediaProvince = this.FoldingData
            this.getxAxis(),
            this.getNegative(),
            this.getNeuter(),
            this.getFront()
        }
    }
</script>

<style scoped>

</style>